/*
 *
 * (c) Copyright Ascensio System Limited 2010-2018
 *
 * This program is freeware. You can redistribute it and/or modify it under the terms of the GNU 
 * General Public License (GPL) version 3 as published by the Free Software Foundation (https://www.gnu.org/copyleft/gpl.html). 
 * In accordance with Section 7(a) of the GNU GPL its Section 15 shall be amended to the effect that 
 * Ascensio System SIA expressly excludes the warranty of non-infringement of any third-party rights.
 *
 * THIS PROGRAM IS DISTRIBUTED WITHOUT ANY WARRANTY; WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR
 * FITNESS FOR A PARTICULAR PURPOSE. For more details, see GNU GPL at https://www.gnu.org/copyleft/gpl.html
 *
 * You can contact Ascensio System SIA by email at sales@onlyoffice.com
 *
 * The interactive user interfaces in modified source and object code versions of ONLYOFFICE must display 
 * Appropriate Legal Notices, as required under Section 5 of the GNU GPL version 3.
 *
 * Pursuant to Section 7 § 3(b) of the GNU GPL you must retain the original ONLYOFFICE logo which contains 
 * relevant author attributions when distributing the software. If the display of the logo in its graphic 
 * form is not reasonably feasible for technical reasons, you must include the words "Powered by ONLYOFFICE" 
 * in every copy of the program you distribute. 
 * Pursuant to Section 7 § 3(e) we decline to grant you any rights under trademark law for use of our trademarks.
 *
*/


/*************************************************************
    Combobox
*************************************************************/


.tl-combobox {
    display: inline-block;
    border: 0;
    width: auto;
    max-width: 90%;
    position: relative;
    text-align: left;

    &.notify-by-combobox {
        max-width: 9000px;
    }

    input,
    select {
        position: absolute;
        left: -9000px;
    }

    .combobox-title {
        display: block;
        margin: 0 0 0 2px;
        line-height: 15px;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        z-index: 1;
        cursor: pointer;
        color: #333;
        .textOverflowEllipsis();

        &:after {
            .arrow-down(4px, #212121);
            right: 9px;
            margin-top: -2px;
        }

        .inner-text {
            display: block;
            margin: 0 24px 0 0;
            border-bottom: 1px dotted #333;
            overflow: hidden;
            white-space: nowrap;
            .textOverflowEllipsis();
        }
    }

    .combobox-wrapper {
        display: block;
        width: 100%;
        width: 1px;
        height: 1px;
        line-height: 1px;
        position: absolute;
        right: 0;
        bottom: -5px;
        z-index: 2;
    }

    .combobox-container {
        display: none;
        background-color: #FFF;
        border: 1px solid #d1d1d1;
        width: auto;
        max-width: 350px;
        margin: -1px 8px 0 0;
        padding: 4px;
        position: absolute;
        right: 0;
        top: 0;
        .borderRadius(4px);
        .boxShadow();
        .noneSelect();

        .container-corner {
            display: block;
            background: url(images/dropdown-corner-top.gif) center center no-repeat;
            width: 7px;
            height: 5px;
            line-height: 5px;
            position: absolute;
            right: 16px;
            top: -5px;
            z-index: 1;
        }

        .combobox-options {
            list-style: none;
            max-height: 200px;
            line-height: 21px;
            margin: 0;
            padding: 0;
            position: relative;
            z-index: 0;
            overflow-x: hidden;
            overflow-y: auto;

            .option-item {
                text-decoration: none;
                background: #FFF url(images/blank.gif);
                line-height: 24px;
                margin: 0;
                padding: 0 12px;
                overflow: hidden;
                white-space: nowrap;
                cursor: pointer;
                .textOverflowEllipsis();

                &.in-focus {
                    text-decoration: none;
                    background-color: #e9e9e9;
                    .borderRadius(2px);
                }

                &.hidden {
                    display: none;
                }

                &.selected-item {
                    color: @linkColor;
                }

                &:hover {
                    text-decoration: none;
                    background-color: #e9e9e9;
                    .borderRadius(2px);
                }
            }
        }
    }

    &.corner-left {
        .combobox-container {
            right: auto;
            left: -32px;

            .container-corner {
                right: auto;
                left: 16px;
            }
        }
    }

    &.top-align {
        .combobox-wrapper {
            right: 0;
            bottom: auto;
            top: -5px;
        }

        .combobox-container {
            right: 0;
            top: auto;
            bottom: 0;

            .container-corner {
                background: url(images/dropdown-corner-bottom.gif) center center no-repeat;
                top: auto;
                bottom: -5px;
            }
        }
    }

    &.disabled {
        .combobox-title {
            color: #646567;
            cursor: default;

            &:after {
                border-top-color: #646567;
            }

            .inner-text {
                border-color: #646567;
            }
        }
    }

    &.full-width {
        max-width: 100%;
    }

    &.left-align {
        .combobox-wrapper, .combobox-container {
            right: auto;
            left: 0;
        }
    }
}